﻿@page
@{ Layout = "_Layout"; }

<el-table
:data="rules"
stripe
style="width: 100%">
<el-table-column
  prop="type"
  label="验证规则"
  width="180">
</el-table-column>
<el-table-column
  prop="value"
  label="参数"
  width="180">
</el-table-column>
<el-table-column
  label="错误提示">
  <template slot-scope="scope">
    {{ scope.row.message }}
  </template>
</el-table-column>
<el-table-column
  label="操作"
  width="80">
  <template slot-scope="scope">
    <el-button v-on:click="btnRemoveClick(scope.row)" type="text" size="small">删除</el-button>
  </template>
</el-table-column>
</el-table>

<div style="height: 10px"></div>
<el-divider></el-divider>
<div style="height: 10px"></div>

<el-row align="left" style="margin-right: 5px">
  <el-col :span="24" align="left">
    <el-button size="small" v-on:click="btnAddClick">添加验证规则</el-button>
  </el-col>
</el-row>

<div style="height: 10px"></div>
<el-divider></el-divider>
<div style="height: 10px"></div>

<el-row align="right" style="margin-right: 5px">
  <el-col :span="24" align="right">
    <el-button size="small" type="primary" v-on:click="btnSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
  </el-col>
</el-row>

<el-drawer
  id="addForm"
  v-if="addForm"
  title="添加验证规则"
  ref="addPanel"
  :visible.sync="addPanel"
  destroy-on-close
  direction="rtl"
  size="80%">
  <div class="drawer__content">
    <el-form v-on:submit.native.prevent ref="addForm" size="mini" label-position="top" :model="addForm" label-width="160px">
      <el-form-item label="验证规则" prop="type" :rules="{ required: true, message: '请选择验证规则' }">
        <el-select v-model="addForm.type" v-on:change="handleRuleChange">
          <el-option v-for="rule in getAvailableRules()" :key="rule.value" :value="rule.value">{{ rule.value + '：' + rule.label }}</el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'Between'"
        label="最小值最大值"
        prop="value"
        :rules="{
          required: true, 
          validator: function(rule, value, callback) {
            if (!value) {
              return callback(new Error('请输入最小值最大值'));
            }
            if (/^\+?\d+,\d+$/.test(value)) {
              callback();
            } else {
              callback(new Error('请输入最小值最大值'));
            }
          }
        }">
        <el-input v-model="addForm.value" placeholder="请输入最小值最大值，中间以逗号分隔"></el-input>
      </el-form-item>

      <el-form-item 
        v-if="addForm.type === 'Included'" 
        label="指定列表" 
        prop="value" 
        :rules="{ required: true, message: '请输入指定列表' }">
        <el-input v-model="addForm.value" placeholder="请输入指定列表"></el-input>
        <div class="tips">列表项使用英文","分隔</div>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'Max'"
        label="最多允许的字符数"
        prop="value"
        :rules="{
          required: true, 
          validator: function(rule, value, callback) {
            if (!value) {
              return callback(new Error('请输入最多允许的字符数'));
            }
            if (/^\+?\d+$/.test(value)) {
              callback();
            } else {
              callback(new Error('请输入数字值'));
            }
          }
        }">
        <el-input v-model="addForm.value" placeholder="请输入最多允许的字符数"></el-input>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'MaxValue'"
        label="允许的最大数值"
        prop="value"
        :rules="{
          required: true, 
          validator: function(rule, value, callback) {
            if (!value) {
              return callback(new Error('请输入允许的最大数值'));
            }
            if (/^\+?\d+$/.test(value)) {
              callback();
            } else {
              callback(new Error('请输入数字值'));
            }
          }
        }">
        <el-input v-model="addForm.value" placeholder="请输入允许的最大数值"></el-input>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'Min'"
        label="最少允许的字符数"
        prop="value"
        :rules="{
          required: true, 
          validator: function(rule, value, callback) {
            if (!value) {
              return callback(new Error('请输入最少允许的字符数'));
            }
            if (/^\+?\d+$/.test(value)) {
              callback();
            } else {
              callback(new Error('请输入数字值'));
            }
          }
        }">
        <el-input v-model="addForm.value" placeholder="请输入最少允许的字符数"></el-input>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'MinValue'"
        label="允许的最小数值"
        prop="value"
        :rules="{
          required: true, 
          validator: function(rule, value, callback) {
            if (!value) {
              return callback(new Error('请输入允许的最小数值'));
            }
            if (/^\+?\d+$/.test(value)) {
              callback();
            } else {
              callback(new Error('请输入数字值'));
            }
          }
        }">
        <el-input v-model="addForm.value" placeholder="请输入允许的最小数值"></el-input>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'Excluded'"
        label="指定列表"
        prop="value"
        :rules="{ required: true, message: '请输入指定列表' }">
        <el-input v-model="addForm.value" placeholder="请输入指定列表"></el-input>
        <div class="tips">列表项使用英文","分隔</div>
      </el-form-item>

      <el-form-item
        v-if="addForm.type === 'Regex'"
        label="正则表达式"
        prop="value"
        :rules="{ required: true, message: '请输入正则表达式' }">
        <el-input v-model="addForm.value" placeholder="请输入正则表达式"></el-input>
        <div class="tips">列表项使用英文","分隔</div>
      </el-form-item>

      <el-form-item v-if="addForm.type" label="错误提示" prop="message" :rules="{ required: true, message: '请输入错误提示' }">
        <el-input v-model="addForm.message" placeholder="请输入错误提示"></el-input>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnAddSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnAddCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
<script src="/sitefiles/assets/js/admin/common/tableStyleLayerValidate.js" type="text/javascript"></script> }